<template>
  <div style=" width: 99%; margin: auto;">
    <h2>负责人情况</h2>

    <el-form :model="postForm" ref="postForm" :rules="postRules" label-width="150px" size="default"
             label-position="right">
      <el-row>
        <el-col style="margin-bottom: 15px;" :span="23">
          <span style="font-size: 18px;font-weight: bold;line-height: 36px;">现职公务员兼任负责人</span>
        </el-col>
        <el-col :span="11" style="margin-top: 15px;">
          <el-form-item prop="incumbentResponsibleMinisterialNum" label="省部级及以上">
            <el-input type="number" placeholder="请输入" v-model="postForm.incumbentResponsibleMinisterialNum">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" style="margin-top: 15px;">
          <el-form-item prop="incumbentResponsibleDepartmentNum" label="地厅级">
            <el-input type="number" placeholder="请输入" v-model="postForm.incumbentResponsibleDepartmentNum">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" style="margin-top: 15px;">
          <el-form-item prop="incumbentResponsibleCountyNum" label="县处级">
            <el-input type="number" placeholder="请输入" v-model="postForm.incumbentResponsibleCountyNum">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" style="margin-top: 15px;">
          <el-form-item prop="incumbentResponsibleClerkNum" label="科级及以下">
            <el-input type="number" placeholder="请输入" v-model="postForm.incumbentResponsibleClerkNum">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col style="margin-bottom: 15px;" :span="23">
        <span style="font-size: 18px;font-weight: bold;line-height: 36px;">退(离)休领导干部担任负责人</span>
      </el-col>
      <el-row>
        <el-col :span="11" style="margin-top: 15px;">
          <el-form-item prop="retireResponsibleMinisterialNum" label="兼任省部级及以上">
            <el-input type="number" placeholder="请输入" v-model="postForm.retireResponsibleMinisterialNum">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" style="margin-top: 15px;">
          <el-form-item prop="retireResponsibleDepartmentNum" label="兼任地厅级">
            <el-input type="number" placeholder="请输入" v-model="postForm.retireResponsibleDepartmentNum">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" style="margin-top: 15px;">
          <el-form-item prop="retireResponsibleCountyNum" label="兼任县处级">
            <el-input type="number" placeholder="请输入" v-model="postForm.retireResponsibleCountyNum">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11" style="margin-top: 15px;">
          <el-form-item prop="retireResponsibleClerkNum" label="兼容科级及以下">
            <el-input type="number" placeholder="请输入" v-model="postForm.retireResponsibleClerkNum">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form :model="postForm.list" ref="listFormRef">
      <el-row>
        <el-col :span="20" style="color: red;padding-top: 28px;">
          *相关负责人不得少于3人
        </el-col>
        <el-col :span="4" style="text-align: right;">
          <el-button type="primary" style="width: 100px;margin-top: 20px;" @click="handleSave()">新增</el-button>
        </el-col>
        <el-col :span="24" style="margin-top: 20px;">
          <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}" :data="postForm.list" border>
            <el-table-column prop="directorName" label="姓名" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorName'" :rules="postFormRules.directorName">
                  <el-input v-model="scope.row.directorName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorSex" label="性别" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorSex'" :rules="postFormRules.directorSex">
                  <el-select clearable v-model="scope.row.directorSex" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="dict in sexOptions"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorAge" label="年龄" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorAge'" :rules="postFormRules.directorAge">
                  <el-input type="number" v-model="scope.row.directorAge" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorUnitPosition" label="工作单位/原单位" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorUnitPosition'"
                              :rules="postFormRules.directorUnitPosition">
                  <el-input v-model="scope.row.directorUnitPosition" placeholder="请输入"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="directorPositionType" label="职务类型" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorPositionType'"
                              :rules="postFormRules.directorPositionType">
                  <el-input v-model="scope.row.directorPositionType" placeholder="请输入"></el-input>
                </el-form-item>
              </template>

            </el-table-column>
            <el-table-column prop="directorPositionName" label="职务名称" align="center">
              <template #default="scope">
                <el-form-item :prop="'[' + scope.$index + '].directorPositionName'"
                              :rules="postFormRules.directorPositionName">
                  <el-input v-model="scope.row.directorPositionName" placeholder="请输入"></el-input>
                </el-form-item>
              </template>

            </el-table-column>
            <!--            <el-table-column prop="directorFullTime" label="是否专职" align="center">-->
            <!--              <template #default="scope">-->
            <!--                <el-form-item :prop="'[' + scope.$index + '].directorFullTime'" :rules="postFormRules.directorFullTime">-->
            <!--                  <el-select clearable  v-model="scope.row.directorFullTime" placeholder="请选择" style="width: 100%;">-->
            <!--                    <el-option-->
            <!--                      v-for="dict in shiOptions"-->
            <!--                      :key="dict.id"-->
            <!--                      :label="dict.name"-->
            <!--                      :value="dict.id"-->
            <!--                    />-->
            <!--                  </el-select>-->
            <!--                </el-form-item>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="80">
              <template #default="scope">
                <el-button type="text" size="default" @click="handleDelete(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div><p>注：</p>
      <p>
        1.负责人包含担任理事长、副理事长、理事、行政负责人等领导职务；
      </p>
      <p>
        2.民办非企业单位行政负责人有且只有一名；
      </p>
      <p>
        3.为保护隐私，部分信息不在报告书中显示；
      </p></div>
    <el-dialog title="新增负责人" v-model="addDialog">
      <el-form :model="tableForm" ref="tableForm" label-width="80px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="姓名" prop="directorName">
              <el-input v-model="tableForm.directorName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="年龄" prop="directorAge">
              <el-input v-model="tableForm.directorAge" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="工作单位/原单位" prop="directorUnitPosition" label-width="140px">
              <el-input v-model="tableForm.directorUnitPosition" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="职务类型" prop="directorPositionType">
              <el-input v-model="tableForm.directorPositionType" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="职务名称" prop="directorPositionName">
              <el-input v-model="tableForm.directorPositionName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="性别" prop="directorSex">
              <el-select clearable v-model="tableForm.directorSex" filterable placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="11">-->
          <!--            <el-form-item label="是否专职" prop="directorFullTime">-->
          <!--              <el-select clearable  v-model="tableForm.directorFullTime" filterable placeholder="请选择" style="width: 100%;">-->
          <!--                <el-option-->
          <!--                  v-for="dict in shiOptions"-->
          <!--                  :key="dict.id"-->
          <!--                  :label="dict.name"-->
          <!--                  :value="dict.id"-->
          <!--                />-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addList()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTableInfoByPage, mfSavePractitioners, mfSaveResponsible } from '@/views/yearCheck/ykb/mf/mf'

export default {
  data() {
    return {
      sexOptions: [{ id: 1, name: '男' }, { id: 2, name: '女' }],
      shiOptions: [{ id: '1', name: '是' }, { id: '2', name: '否' }],
      addDialog: false,
      selectName: '',
      tableForm: {
        id: '',
        directorAge: '',//年龄
        // directorFullTime: '',//专职/兼职
        directorName: '',//姓名
        directorPositionName: '',//职务名称
        directorPositionType: '',//职务类型
        directorSex: '',//性别1-男，2-女 0-未知
        directorUnitPosition: ''//单位及职务/原单位/社会组织职务
      },
      postForm: {
        id: '',
        incumbentResponsibleClerkNum: '',//现任负责人县处级人数
        incumbentResponsibleCountyNum: '',//现任负责人县处级人数
        incumbentResponsibleDepartmentNum: '',//现任负责人厅级人数
        incumbentResponsibleMinisterialNum: '',//现任负责人部级人数
        retireResponsibleClerkNum: '',//退休负责人科员级人数
        retireResponsibleCountyNum: '',//退休负责人县处级人数
        retireResponsibleDepartmentNum: '',//退休负责人厅级人数
        retireResponsibleMinisterialNum: '',//退休负责人部级人数
        list: [],
        creditCode: '',//统一社会信用代码
        examineYear: '',//审查年度
        organizationBaseId: '1'//组织id
      },
      postRules: {
        incumbentResponsibleClerkNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        incumbentResponsibleCountyNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        incumbentResponsibleDepartmentNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        incumbentResponsibleMinisterialNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        retireResponsibleClerkNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        retireResponsibleCountyNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        retireResponsibleDepartmentNum: [{ required: true, message: '请完善', trigger: 'blur' }],
        retireResponsibleMinisterialNum: [{ required: true, message: '请完善', trigger: 'blur' }]
      },
      postFormRules: {
        directorAge: [{ required: true, message: '请完善' }],
        // directorFullTime: [{ required: true, message: '请选择' }],
        directorName: [{ required: true, message: '请完善' }],
        directorPositionName: [{ required: true, message: '请完善' }],
        directorPositionType: [{ required: true, message: '请完善' }],
        directorSex: [{ required: true, message: '请选择' }],
        directorUnitPosition: [{ required: true, message: '请完善' }]
      }
    }
  },
  created() {

  },
  methods: {
    handleDelete(index) {
      this.$confirm('删除此负责人（' + this.postForm.list[index].directorName + '）信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postForm.list.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addList() {
      // this.addDialog = false
      this.postForm.list.push(Object.assign({}, this.tableForm))
    },
    postInfo() {
      if (this.postForm.list.length < 3) {
        this.$message({
          type: 'error',
          message: '负责人不得少于3人!'
        })
        return
      }
      this.$refs.postForm.validate(valid1 => {
        if (valid1) {
          this.postForm.creditCode = localStorage.getItem('creditCode')
          this.postForm.examineYear = localStorage.getItem('examineYear')
          this.postForm.organizationBaseId = '1'
          this.$refs.listFormRef.validate(valid => {
            if (valid) {
              mfSaveResponsible(this.postForm).then(response => {
                this.$message({
                  message: '保存负责人信息成功',
                  type: 'success'
                })
                this.getInfo()
              })
            } else {
              this.$message({
                message: '列表还未填写完整！',
                type: 'error'
              })
            }
          })

        } else {
          this.$message({
            message: '请填写相关人数！',
            type: 'error'
          })
        }
      })
    },
    handleSave() {
      // this.addDialog = true
      this.postForm.list.push(Object.assign({}, this.tableForm))
    },
    getInfo() {
      getTableInfoByPage(3).then(response => {
        this.postForm = JSON.parse(JSON.stringify(response.data).replace(/null/g, '""'))
        if (this.postForm.list == null || this.postForm.list == '') {
          this.postForm.list = []
        }
        if (this.postForm.list.length == 0) {
          this.handleSave()
          this.handleSave()
          this.handleSave()
        }else if(this.postForm.list.length == 1){
          this.handleSave()
          this.handleSave()
        }else if(this.postForm.list.length == 2){
          this.handleSave()
        }

      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color: #e0e5f0;
}

:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}

.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}

.el-form-item {
  margin-bottom: 0px;
}
</style>
